<template>
  <div>
    <div v-if="!sub">
      <el-form class="tableSearch" size="mini">
        <el-form-item>
          <el-button type="primary" v-if='setRole("新增")' @click="routerPushAdd()">新增</el-button>
        </el-form-item>
      </el-form>
      
      <!-- 搜索框 -->
      <div class="tableSearch">
        <el-form size="mini">
          <el-form-item label="" label-width="0">
            <el-input v-model="selectdata.inCode" placeholder="请输入收货单号"></el-input>
          </el-form-item>
          <el-form-item label="收货状态：" label-width="100px">
            <el-select v-model="selectdata.inStatus" placeholder="请选择">
              <el-option label="全部" value=""></el-option>
              <el-option v-for="(item, index) in purchaseReceivingsStatusArr" :key="index" :label="item" :value="index"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="" label-width="15px">
            <el-button type="primary" @click="orderTable.handleSearch(_getRepertoryInBoundListPage, orderTable.pageData)">搜索</el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 表格 -->
      <div class="tableMain">
        <el-table :data="orderTable.tableData">
          <el-table-column type="index" label="序号" width="55" align="center"></el-table-column>
          <el-table-column prop="inCode" label="收货单号" align="center" width="200"></el-table-column>
          <el-table-column prop="orderDate" :formatter="tim" label="收货时间" align="center"></el-table-column>
          <el-table-column prop="shopName" label="供应商名称" align="center"></el-table-column>
          <el-table-column prop="inStatus" label="收货状态" align="center">
            <template slot-scope="scope">
              <span>{{purchaseReceivingsStatusArr[scope.row.inStatus]}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="inType" label="单据类型" :formatter="inType" align="center"></el-table-column>
          <el-table-column prop="purchaseCode" label="来源单号" align="center" width="200"></el-table-column>
          <el-table-column prop="userName" label="操作员" align="center"></el-table-column>
          <el-table-column align="center" label="操作" width="180">
            <template slot-scope="scope">
              <el-button size="mini" v-if="scope.row.inStatus !== 3" @click="routerPushInfo(scope.row.id, 1)" type="text">查看</el-button>
              <el-button size="mini" v-if='setRole("修改")' v-show="scope.row.inStatus === 3" @click="routerPushInfo(scope.row.id, 2)" type="text">修改</el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 页码 -->
        <page-unit :pageData="orderTable.pageData" :func="_getRepertoryInBoundListPage"></page-unit>
      </div>
    </div>
    <div v-else>
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import pageUnit from "components/Page";
import u from "@/util";
import s from "@/util/state";
import { TableHandle } from "@/util/class";
import { getRepertoryInBoundListPage } from "@/api";

export default {
  computed: mapState(["sub", "merchantId", "power"]),
  components: {pageUnit},
  data () {
    return {
      inType: s.inType,  // 单据类型
      purchaseReceivingsStatusArr: s.purchaseReceivingsStatusArr,  // 收货状态
      selectdata: {
        inStatus: "",  // 状态
        inCode: "",
      },
      orderTable: new TableHandle(),
    };
  },
  mounted () {
    this._getRepertoryInBoundListPage(this.orderTable.pageData.pageSize, 1);
  },
  watch: {
    sub: {
      handler: function (val, oldVal) {
        if (oldVal != null && val == false) {
          this._getRepertoryInBoundListPage(this.orderTable.pageData.pageSize, 1);
        }
      },
      deep: true
    }
  },
  methods: {
    // 分配权限
    setRole (key) {
      return u.selectTitle(this.power, key)
    },

    routerPushInfo (id, showTab) {
      u.routerTo("/order-center/purchase-management/purchase-receiptMg/purchase-receiptEdit", { id: id, showTab: showTab });
    },

    tim (row) {
      return u.foryear(row.orderDate);
    },

    // 获取表格数据
    _getRepertoryInBoundListPage (pageSize, pageNum) {
      getRepertoryInBoundListPage({
        shopId: this.merchantId,
        inStatus: this.selectdata.inStatus,  // 状态
        inCode: this.selectdata.inCode,  // 收货单号
        inType: 1,
        pageNum: pageNum,
        pageSize: pageSize
      }).then(res => {
        this.orderTable.pageData.totalItems = res.data.pageTotal;
        this.orderTable.tableData = res.data.list;
      });
    },

    routerPushAdd () {
      u.routerTo("/order-center/purchase-management/purchase-receiptMg/purchase-receiptAdd")
    }
  }
};
</script>
